// src/components/popups/sponsorTable/companyContactsByCompanyId/SponsorContactsModal.tsx

import type { FC } from 'react';
import { useState } from 'react';
import SearchForm from '@/components/popups/sponsorTable/companyContactsByCompanyId/SearchForm';
import ResultTable from '@/components/popups/sponsorTable/companyContactsByCompanyId/ResultTable';
import Pagination from '@/components/sponsorDashboard/mainContent/Pagination';
import { fetchSponsorContactsBySponsorId, type SponsorContactItem } from '@/services/sponsorDashboardService/sponsorContactsBySponsorId';

interface SponsorContactsModalProps {
  onClose: () => void;
  sponsorId?: number;
}

interface SponsorContactsSearchParams {
  sponsorId: number;
  kc?: boolean;
  inv?: boolean;
}

const SponsorContactsModal: FC<SponsorContactsModalProps> = ({ onClose, sponsorId }) => {
  const [results, setResults] = useState<SponsorContactItem[]>([]);
  const [currentPage, setCurrentPage] = useState(1);
  const [loading, setLoading] = useState(false);
  const itemsPerPage = 10;

  const handleSearch = async (params: SponsorContactsSearchParams) => {
    setLoading(true);
    setResults([]);
    setCurrentPage(1);

    try {
      const data = await fetchSponsorContactsBySponsorId(params);

      setTimeout(() => {
        setResults(data as SponsorContactItem[]);
        setLoading(false);
      }, 300);
    } catch (err) {
      console.error('Error fetching sponsor contacts:', err);
      setResults([]);
      setLoading(false);
    }
  };

  const paginatedResults = results.slice(
    (currentPage - 1) * itemsPerPage,
    currentPage * itemsPerPage
  );

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 dark:bg-black/80 backdrop-blur-sm p-2 sm:p-4 font-poppins text-xs sm:text-sm md:text-base" onClick={onClose}>
      <div className="w-full sm:max-w-2xl md:max-w-3xl lg:max-w-4xl bg-white dark:bg-slate-900 rounded-2xl shadow-2xl dark:shadow-blue-900 overflow-hidden animate-fade-in-up max-h-[90vh] overflow-y-auto relative border border-gray-200 dark:border-slate-800" onClick={e => e.stopPropagation()}>
        {/* Header */}
        <div className="px-4 sm:px-6 py-4 bg-white dark:bg-slate-900 text-gray-800 dark:text-cyan-200 flex justify-between items-center border-b border-gray-200 dark:border-slate-800 rounded-t-2xl shadow-sm text-xs sm:text-sm md:text-base">
          <h2 className="text-base sm:text-lg md:text-2xl font-extrabold tracking-tight text-blue-700 dark:text-cyan-300">Company Contacts</h2>
          <button onClick={onClose} className="w-9 h-9 flex items-center justify-center rounded-full text-xl font-bold text-gray-500 dark:text-gray-300 hover:text-red-600 dark:hover:text-red-300 hover:bg-red-50 dark:hover:bg-red-900 transition focus:outline-none focus:ring-2 focus:ring-red-300 dark:focus:ring-red-800">
            ×
          </button>
        </div>
        {/* Body */}
        <div className="p-3 sm:p-6 space-y-4 text-xs sm:text-sm md:text-base text-gray-800 dark:text-gray-100 bg-white dark:bg-slate-900">
          <SearchForm onSearch={handleSearch} sponsorId={sponsorId} />
          {loading ? (
            <div className="text-center text-gray-400 dark:text-gray-500 animate-pulse py-8 text-base sm:text-lg">Loading results...</div>
          ) : (
            <ResultTable data={paginatedResults} />
          )}
          {results.length > itemsPerPage && (
            <Pagination
              currentPage={currentPage}
              setCurrentPage={setCurrentPage}
              totalCount={results.length}
              pageSize={itemsPerPage}
            />
          )}
        </div>
      </div>
    </div>
  );
};

export default SponsorContactsModal; 